<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>邮箱修改</title>
		[#include "/common/include.ftl"/]
		<link type="text/css" rel="styleSheet" href="${base}/resource/css/member.css">
		<script type="text/javascript" src="${base}/resource/js/member.js"></script>
		<script type="text/javascript">
			var token;
			function changeCaptcha(){
				$(".captcha-img").attr("src","${base}/captcha.jhtml?captchaId=${captchaId}&timestamp=" + (new Date()).valueOf());
			}
			
			function sendEmail(resend){
				var captcha = $("#captcha").val();
				if(!captcha || captcha == ''){
					$(".captcha-error-msg").html("请输入验证码");
					return;
				}
				ajax({
					url	: base + "/member/sendValidEmail.jhtml",
					data: {
						captchaId 	: "${captchaId}",
						captcha 	: captcha,
						token		: token
					},
					showError:true,
					success	: function(data){
						oDialog.prompt("发送邮件成功");
						if(!resend){
							$(".email-modify").addClass("hide");
							$(".right-wrap").removeClass("hide");
						}
						token = data.content;
					},
					error	: function(){
						changeCaptcha();
					}
				});
			}
		</script>
	</head>
	<body class="customer">
		[#include "/common/header.ftl"/]
		<div class="crumbs">
			<a href="${base}/member/index.jhtml">会员中心</a>
			<i style='font-family: simsun;font-style: normal;'>></i>
			<a>账户中心</a>
			<i style='font-family: simsun;font-style: normal;'>></i>
			<a href="${base}/member/safe.jhtml">账户安全</a>
			<i style='font-family: simsun;font-style: normal;'>></i>
			<a href="${base}/member/email.jhtml">邮箱修改</a>
		</div>
		<div id="member-main">
			[#include "/common/member-left.ftl"/]
			<div class="member-right">
				<div class="right-wrap">
					<h2 class="right-title">邮箱修改</h2>
					<div class="email-step">
						<div class="step step1 current">
							1. 验证身份
						</div>
						<div class="step step2">
							2. 修改邮箱
						</div>
						<div class="step step3">
							3. 完成
						</div>
					</div>
					<div class="email-modify mt10 mc-list">
						<div class="form">
							<div class="item">
								<div class="label">
									已验证邮箱：
								</div>
								<div class="fl">
									<strong>${email}</strong>
								</div>
								<div class="clear"></div>
							</div>
							<div class="item">
								<div class="label">
									验证码：
								</div>
								<div class="fl">
									<input type="text" name="captcha" id="captcha" class="text">
									<img src="${base}/captcha.jhtml?captchaId=${captchaId}" class="captcha-img" onclick="changeCaptcha();"><a href="javascript:changeCaptcha();">看不清?换一张</a>
									<div class="clear"></div><span class="error-msg captcha-error-msg"></span>
								</div>
								<div class="clear"></div>
							</div>
							<div class="item">
								<div class="label">
									&nbsp;
								</div>
								<div class="fl">
									<button type="button" class="hp-button submit" onclick="sendEmail();">
										提交
									</button>
								</div>
							</div>
						</div>
					</div>
					<div class="right-wrap hide">
						<div class="mail-send mt10">
							<h2><strong>已发送验证邮件至：</strong><span class="email">${email}</span><span class="text">完成邮箱验证，</span></h2>
							<p class="mt10">
								验证邮件24小时内有效，请尽快登录您的邮箱点击验证链接完成验证。
							</p><a class="mt10 hp-button" href="${emailHost}">查看验证码邮箱</a>
						</div>
						<div class="mail-prompt">
							<p>
								邮件没收到?
							</p>
							<p>
								1.请检查您的垃圾箱或者广告箱，邮件有可能被误认为垃圾或者广告邮件；
							</p>
							<p>
								<span>2.如果垃圾箱或广告箱也没收到,请尝试将${setting.smtpFromMail}添加为收件人白名单(可参考邮箱白名单设置),并且</span><a href="javascript:sendEmail(true);">重发验证邮件 </a>
							</p>
						</div>
					</div>
				</div>
			</div>
			<div class="clear"></div>
		</div>
		[#include "common/footer-slidebar-lazyload.ftl"]
	</body>
</html>